<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');?>

<p class="bold">
	Dữ liệu theo ngày
</p>
<br />
<input type="button" value="Export to .CVS" onclick="cpcdomain_date_export_2csv();" />
<br />
<table id="tblByDate" class="martop10 tbl-list tablesorter" cellpadding="0" cellspacing="0" border="0">
	<thead>
		<tr>
			<th class="td-label text-center tblsort-header" width="100" style="background-image: none;">
				<b>Date</b>
			</th>
			
			<th class="td-label tblsort-header text-center" width="90" style="background-image: none;">
				<b>Total Click</b>
			</th>
			
			<th class="td-label tblsort-header text-center" width="90" style="background-image: none;">
				<b>Real Click</b>
			</th>
									
			<th class="td-label tblsort-header text-center" width="90" style="background-image: none;">
				<b>Total View</b>
			</th>
			
			<th class="td-label tblsort-header text-center" width="70" style="background-image: none;">
				<b>CTR (%)</b>
			</th>	
		</tr>
	</thead>
	<tbody>
		<?php
		$index = 1;
		foreach($lstDate as $dItem)
		{
			$odd = ($index%2 == 1) ? "" : "odd";
		?>
			<tr  class="<?php echo $odd; ?>">
				<td class="pad5 text-center" >
					<?php echo $dItem['dt']; ?>
				</td>
															
				<td class="pad5 text-right" >
					<?php echo ($dItem['totalclick'] == '' || $dItem['totalclick'] == -1) ? 'N/A' : number_format($dItem['totalclick']); ?>
				</td>
				
				<td class="pad5 text-right" >
					<?php echo ($dItem['realclick'] == '' || $dItem['realclick'] == -1) ? 'N/A' : number_format($dItem['realclick']); ?>
				</td>
											
				<td class="pad5 text-right" >
					<?php echo ($dItem['totalview'] == '' || $dItem['totalview'] == -1) ? 'N/A' : number_format($dItem['totalview']); ?>
				</td>
				
				<td class="pad5 text-right" >
					<?php echo ($dItem['ctr'] == -1 || $dItem['ctr'] == '') ? 'N/A' : $dItem['ctr']; ?>
				</td>
			</tr>
		<?php
			$index++;
		}
		?>
	</tbody>
	<tfoot>
		<tr>
			<tr>
				<td class="pad5 bold">
					Tổng
				</td>
				<td class="pad5 text-right bold">
					<?php echo $totalClick; ?>
				</td>
				<td class="pad5 text-right bold">
					<?php echo $totalRealClick; ?>
				</td>
				<td class="pad5 text-right bold">
					<?php echo $totalView; ?>
				</td>
				<td class="pad5 text-right bold">
					<?php echo $totalCtr; ?>
				</td>
			</tr>
		</tr>
	</tfoot>
</table>
<br />

<div id="total_click_chart" class="chart"></div>
<br />
<div id="total_real_click_chart" class="chart"></div>
<br />
<div id="total_view_chart" class="chart"></div>
<br />
<div id="ctr_chart" class="chart"></div>
<br />
<br />

<script type="text/javascript">
	Highcharts.theme = {
	   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
	   chart: {
		  backgroundColor: {
			 linearGradient: [0, 0, 500, 500],
			 stops: [
				[0, 'rgb(239, 239, 239)']
			 ]
		  },
		  plotBackgroundColor: 'rgba(255, 255, 255, .9)',
		  plotBorderWidth: 1,
		  spacingRight: 30
	   },
	   title: {
		  style: { 
			 color: '#000',
			 font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
		  }
	   },
	   subtitle: {
		  style: { 
			 color: '#666666',
			 font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
		  }
	   },
	   xAxis: {
		  
		  labels: {					 
			 style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			 }
		  },
		  tickColor: '#333',
		  title: {
			 style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
	
			 }            
		  }
	   },
	   yAxis: {
		  //minorTickInterval: 'auto',
		  lineColor: '#aaa',
		  lineWidth: 1,
		  tickWidth: 1,
		  tickColor: '#999',
		  labels: {
			 style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			 }
		  },
		  title: {
			 style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
			 }            
		  }
		   
	   },
	   legend: {
		  itemStyle: {         
			 font: '9pt Trebuchet MS, Verdana, sans-serif',
			 color: 'black'
	
		  },
		  itemHoverStyle: {
			 color: '#039'
		  },
		  itemHiddenStyle: {
			 color: 'gray'
		  }
	   },
	   labels: {
		  style: {
			 color: '#99b'
		  }
	   }
	};
	
	var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
	var totalClickChart;
	var totalRealClickChart;
	var totalViewChart;
	var totalCtrChart;
	$(document).ready(function() {
		totalClickChart = new Highcharts.Chart({
			chart: {
				renderTo: 'total_click_chart',
				defaultSeriesType: 'areaspline',
                marginBottom: 60,
				zoomType: 'x'
			},
			title: {
				text: 'Total Click',
				style: {
						font: 'normal 18px arial, sans-serif',
						color:'#0a708c'
				}
			},
			 xAxis: {
				categories: <?php echo json_encode($arrDate);?>,
				maxZoom: 5,
                labels: {
                  //  step:  <?php  echo isset($chartStep) ? $chartStep : 1;?>,
					rotation: 0,
					align: 'center'
                },
				tickPixelInterval:0,
				tickmarkPlacement: 'on',
				tickInterval: <?php  echo isset($chartStep) ? $chartStep : 1;?>,
				lineColor: '#333',
				lineWidth: 1
				
			},
			yAxis: {
				title: {
					text: 'Số lượng',
					style: {
						font: 'bold 14px vernada, sans-serif',
						color:'#0a708c'
					}
				}
			},
			tooltip: {
				formatter: function() {
						var a=function addCommas(nStr)
							{
								nStr += '';
								x = nStr.split('.');
								x1 = x[0];
								x2 = x.length > 1 ? '.' + x[1] : '';
								var rgx = /(\d+)(\d{3})/;
								while (rgx.test(x1)) {
									x1 = x1.replace(rgx, '$1' + ',' + '$2');
								}
								return x1 + x2;
							}
		                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
				},
				style: {
					font: 'normal 12px vernada, sans-serif',
					color:'#000000'
				},
				
                crosshairs: true
			},
			credits: {
				enabled: false
			},
			plotOptions: {
				areaspline: {
					fillOpacity: 0.2,
					lineWidth: 2,
					states: {
					   hover: {
						  lineWidth: 3
					   }
					},
					marker: {
					   enabled: true,
					   states: {
						  hover: {
							 enabled: true,
							 symbol: 'circle',
							 radius: 4,
							 lineWidth: 1
						  },
						  radius: 4
					   }   
					}
				 }
				
				
			},
			rangeSelector: {
				selected: 1,
				inputEnabled: false
			},
			
			navigator: {
				height: 30
			},
            legend: {
				align: 'center',
				verticalAlign: 'bottom',
				y: 8,
				x:10,
				floating: false,
				borderWidth: 1,
				///backgroundColor: '#FFFFFF',
				backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
				
			},
			series: [<?php echo $clickChart; ?>],
            exporting: {
                enabled: false
            }
			
		});
		
		totalRealClickChart = new Highcharts.Chart({
			chart: {
				renderTo: 'total_real_click_chart',
				defaultSeriesType: 'areaspline',
                marginBottom: 60,
				zoomType: 'x'
			},
			title: {
				text: 'Total Real Click',
				style: {
						font: 'normal 18px arial, sans-serif',
						color:'#0a708c'
				}
			},
			 xAxis: {
				categories: <?php echo json_encode($arrDate);?>,
				maxZoom: 5,
                labels: {
                  //  step:  <?php  echo isset($chartStep) ? $chartStep : 1;?>,
					rotation: 0,
					align: 'center'
                },
				tickPixelInterval:0,
				tickmarkPlacement: 'on',
				tickInterval: <?php  echo isset($chartStep) ? $chartStep : 1;?>,
				lineColor: '#333',
				lineWidth: 1
				
			},
			yAxis: {
				title: {
					text: 'Số lượng',
					style: {
						font: 'bold 14px vernada, sans-serif',
						color:'#0a708c'
					}
				}
			},
			tooltip: {
				formatter: function() {
						var a=function addCommas(nStr)
							{
								nStr += '';
								x = nStr.split('.');
								x1 = x[0];
								x2 = x.length > 1 ? '.' + x[1] : '';
								var rgx = /(\d+)(\d{3})/;
								while (rgx.test(x1)) {
									x1 = x1.replace(rgx, '$1' + ',' + '$2');
								}
								return x1 + x2;
							}
		                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
				},
				style: {
					font: 'normal 12px vernada, sans-serif',
					color:'#000000'
				},
				
                crosshairs: true
			},
			credits: {
				enabled: false
			},
			plotOptions: {
				areaspline: {
					fillOpacity: 0.2,
					lineWidth: 2,
					states: {
					   hover: {
						  lineWidth: 3
					   }
					},
					marker: {
					   enabled: true,
					   states: {
						  hover: {
							 enabled: true,
							 symbol: 'circle',
							 radius: 4,
							 lineWidth: 1
						  },
						  radius: 4
					   }   
					}
				 }
				
				
			},
			rangeSelector: {
				selected: 1,
				inputEnabled: false
			},
			
			navigator: {
				height: 30
			},
            legend: {
				align: 'center',
				verticalAlign: 'bottom',
				y: 8,
				x:10,
				floating: false,
				borderWidth: 1,
				///backgroundColor: '#FFFFFF',
				backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
				
			},
			series: [<?php echo $realClickChart;?>],
            exporting: {
                enabled: false
            }
			
		});
		
		totalViewChart = new Highcharts.Chart({
			chart: {
				renderTo: 'total_view_chart',
				defaultSeriesType: 'areaspline',
                marginBottom: 60,
				zoomType: 'x'
			},
			title: {
				text: 'Total View',
				style: {
						font: 'normal 18px arial, sans-serif',
						color:'#0a708c'
				}
			},
			 xAxis: {
				categories: <?php echo json_encode($arrDate);?>,
				maxZoom: 5,
                labels: {
                  //  step:  <?php  echo isset($chartStep) ? $chartStep : 1;?>,
					rotation: 0,
					align: 'center'
                },
				tickPixelInterval:0,
				tickmarkPlacement: 'on',
				tickInterval: <?php  echo isset($chartStep) ? $chartStep : 1;?>,
				lineColor: '#333',
				lineWidth: 1
				
			},
			yAxis: {
				title: {
					text: 'Số lượng',
					style: {
						font: 'bold 14px vernada, sans-serif',
						color:'#0a708c'
					}
				}
			},
			tooltip: {
				formatter: function() {
						var a=function addCommas(nStr)
							{
								nStr += '';
								x = nStr.split('.');
								x1 = x[0];
								x2 = x.length > 1 ? '.' + x[1] : '';
								var rgx = /(\d+)(\d{3})/;
								while (rgx.test(x1)) {
									x1 = x1.replace(rgx, '$1' + ',' + '$2');
								}
								return x1 + x2;
							}
		                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
				},
				style: {
					font: 'normal 12px vernada, sans-serif',
					color:'#000000'
				},
				
                crosshairs: true
			},
			credits: {
				enabled: false
			},
			plotOptions: {
				areaspline: {
					fillOpacity: 0.2,
					lineWidth: 2,
					states: {
					   hover: {
						  lineWidth: 3
					   }
					},
					marker: {
					   enabled: true,
					   states: {
						  hover: {
							 enabled: true,
							 symbol: 'circle',
							 radius: 4,
							 lineWidth: 1
						  },
						  radius: 4
					   }   
					}
				 }
				
				
			},
			rangeSelector: {
				selected: 1,
				inputEnabled: false
			},
			
			navigator: {
				height: 30
			},
            legend: {
				align: 'center',
				verticalAlign: 'bottom',
				y: 8,
				x:10,
				floating: false,
				borderWidth: 1,
				///backgroundColor: '#FFFFFF',
				backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
				
			},
			series: [<?php echo $viewChart; ?>],
            exporting: {
                enabled: false
            }
			
		});
		
		totalCtrChart = new Highcharts.Chart({
			chart: {
				renderTo: 'ctr_chart',
				defaultSeriesType: 'areaspline',
                marginBottom: 60,
				zoomType: 'x'
			},
			title: {
				text: 'CTR',
				style: {
						font: 'normal 18px arial, sans-serif',
						color:'#0a708c'
				}
			},
			 xAxis: {
				categories: <?php echo json_encode($arrDate);?>,
				maxZoom: 5,
                labels: {
                  //  step:  <?php  echo isset($chartStep) ? $chartStep : 1;?>,
					rotation: 0,
					align: 'center'
                },
				tickPixelInterval:0,
				tickmarkPlacement: 'on',
				tickInterval: <?php  echo isset($chartStep) ? $chartStep : 1;?>,
				lineColor: '#333',
				lineWidth: 1
				
			},
			yAxis: {
				title: {
					text: 'Số lượng',
					style: {
						font: 'bold 14px vernada, sans-serif',
						color:'#0a708c'
					}
				}
			},
			tooltip: {
				formatter: function() {
						var a=function addCommas(nStr)
							{
								nStr += '';
								x = nStr.split('.');
								x1 = x[0];
								x2 = x.length > 1 ? '.' + x[1] : '';
								var rgx = /(\d+)(\d{3})/;
								while (rgx.test(x1)) {
									x1 = x1.replace(rgx, '$1' + ',' + '$2');
								}
								return x1 + x2;
							}
		                return ''+ this.x +': <b>'+ a(this.y) +'</b>';
				},
				style: {
					font: 'normal 12px vernada, sans-serif',
					color:'#000000'
				},
				
                crosshairs: true
			},
			credits: {
				enabled: false
			},
			plotOptions: {
				areaspline: {
					fillOpacity: 0.2,
					lineWidth: 2,
					states: {
					   hover: {
						  lineWidth: 3
					   }
					},
					marker: {
					   enabled: true,
					   states: {
						  hover: {
							 enabled: true,
							 symbol: 'circle',
							 radius: 4,
							 lineWidth: 1
						  },
						  radius: 4
					   }   
					}
				 }
				
				
			},
			rangeSelector: {
				selected: 1,
				inputEnabled: false
			},
			
			navigator: {
				height: 30
			},
            legend: {
				align: 'center',
				verticalAlign: 'bottom',
				y: 8,
				x:10,
				floating: false,
				borderWidth: 1,
				///backgroundColor: '#FFFFFF',
				backgroundColor: Highcharts.theme.legendBackgroundColor || '#FFFFFF'
				
			},
			series: [<?php echo $ctrChart; ?>],
            exporting: {
                enabled: false
            }
		});
	});
</script>